<template>
	<view class="input-container">
		<!-- 页面头部 -->
		<view class="input-page-head">
			<view class="input-page-head-title">input 输入框</view>
		</view>
		
		<!-- 主体：仅保留右侧输入框示例 -->
		<view class="input-main">
			<view class="input-demo">
				<view class="demo-item">
					<view class="demo-label">键盘右下角按钮显示为发送</view>
					<input type="text" confirm-type="send" placeholder="请输入内容" class="demo-input" />
				</view>
				<view class="demo-item">
					<view class="demo-label">控制最大输入长度的 input</view>
					<input type="text" maxlength="10" placeholder="最大输入长度为10" class="demo-input" />
				</view>
				<view class="demo-item">
					<view class="demo-label">实时获取输入值：{{ realtimeValue }}</view>
					<input type="text" @input="getRealtime" placeholder="输入内容实时显示" class="demo-input" />
				</view>
				<view class="demo-item">
					<view class="demo-label">数字输入的 input</view>
					<input type="number" placeholder="请输入数字" class="demo-input" />
				</view>
				<view class="demo-item">
					<view class="demo-label">密码输入的 input</view>
					<input type="password" placeholder="请输入密码" class="demo-input" />
				</view>
				<view class="demo-item">
					<view class="demo-label">带小数点的 input</view>
					<input type="digit" placeholder="请输入带小数点的数字" class="demo-input" />
				</view>
				<view class="demo-item">
					<view class="demo-label">身份证输入的 input</view>
					<input type="idcard" placeholder="请输入身份证号码" class="demo-input" />
				</view>
				<view class="demo-item">
					<view class="demo-label">控制占位符颜色的 input</view>
					<input type="text" placeholder="占位符字体是红色的" placeholder-style="color:red;" class="demo-input" />
				</view>
				<view class="demo-item">
					<view class="demo-label">带清除按钮的输入框</view>
					<input type="text" :value="clearValue" @input="handleClearInput" placeholder="输入后显示清除按钮" class="demo-input" />
					<text v-if="showClear" @click="clearInput" class="clear-btn">×</text>
				</view>
				<view class="demo-item">
					<view class="demo-label">可查看密码的输入框</view>
					<input type="password" :password="isPassword" placeholder="请输入密码" class="demo-input" />
					<text @click="togglePassword" class="eye-btn">{{ isPassword ? '👁️' : '👁️‍🗨️' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				realtimeValue: '', 
				clearValue: '',    
				showClear: false,  
				isPassword: true   
			};
		},
		methods: {
			getRealtime(e) {
				this.realtimeValue = e.detail.value;
			},
			handleClearInput(e) {
				this.clearValue = e.detail.value;
				this.showClear = e.detail.value.length > 0;
			},
			clearInput() {
				this.clearValue = '';
				this.showClear = false;
			},
			togglePassword() {
				this.isPassword = !this.isPassword;
			}
		}
	}
</script>

<style>
	.input-container {
		min-height: 100vh;
		background-color: #f7f7f7;
	}
	
	/* 头部容器：去掉紫色背景，改为白色 */
	.input-page-head {
		padding: 30rpx;
		background-color: #fff; 
	}
	
	/* 标题文字：浅灰色 + 底部下划线 */
	.input-page-head-title {
    font-size: 40rpx;
    color: #999; /* 浅灰色文字 */
    border-bottom: 1rpx solid #e5e5e5; /* 底部浅灰横线 */
    padding-bottom: 10rpx; /* 与下划线保持间距 */
    text-align: center; /* 新增：让文字水平居中 */
	}

	.input-main {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
	}
	
	.input-demo {
		flex: 1;
		min-width: 400rpx;
		padding: 20rpx;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.demo-item {
		margin-bottom: 30rpx;
		position: relative;
	}
	
	.demo-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
	
	.demo-input {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 2rpx solid #ddd;
		border-radius: 10rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}
	
	.clear-btn, .eye-btn {
		position: absolute;
		right: 20rpx;
		top: 60rpx;
		font-size: 40rpx;
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #999;
	}
	
	.eye-btn {
		right: 70rpx;
	}
</style>